<!-- ChartComponent.vue -->  
<template>  
    <div ref="chartContainer" style="width: 600px; height: 400px;"></div>  
  </template>  
    
  <script>  
  import * as echarts from 'echarts';  
  import request from "@/utils/request";  
    
  export default {  
    name: 'ChartComponent',  
    props: {  
      chartId: {  
        type: Number,  
        required: true  
      },  
      sceneId: {  
        type: Number,  
        required: true  
      },
      startDate: {  
        type: String,  
        required: false  
      },
      endDate: {  
        type: String,  
        required: false  
      },
      yName:{
        type: String,  
        required: false  
      },  
      xName:{
        type: String,  
        required: false  
      },  
    },  
    data() {  
      return {  
        chart: null,  
        option: {},
      };  
    },  
    mounted() {  
      this.loadChart();  
    },  
    methods: {  
      loadChart() {
        if (!this.chart) {  
            this.chart = echarts.init(this.$refs.chartContainer);  
          }    
        this.chart.showLoading();  
        request.get("/gdepri/drawpic", {  
          params: {  
            sceneId: this.sceneId,  
            chartId: this.chartId,  
            startDate: this.startDate,  
            endDate: this.endDate,
            yName: this.yName,  
            xName: this.xName
          }  
        }).then(res => {  
          this.option = res.data;  
          this.chart.setOption(this.option);  
          this.chart.hideLoading();
        }).catch(error => {  
          console.error('Failed to load chart data:', error);  
        });  
      }  
    },  
    beforeDestroy() {  
      if (this.chart) {  
        this.chart.dispose();  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  /* 样式可以根据需要添加 */  
  </style>